<template>
  <div>
    <div class="setting">
      <el-container>
        <!-- 左边设置选项  -->
        <el-aside width="280px">
          <el-menu
            :default-active="active"
            class="el-menu-vertical-demo left_setting"
            :router="true"
          >
            <el-menu-item
              index="1"
              route="/setting/basic"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">基础设置</span>
            </el-menu-item>
            <el-menu-item
              index="2"
              route="/setting/profile"
            >
              <i class="el-icon-setting"></i>
              <span slot="title">个人资料</span>
            </el-menu-item>
            <el-menu-item
              index="3"
              route="/setting/blacklist"
            >
              <i class="el-icon-setting"></i>
              <span slot="title">黑名单</span>
            </el-menu-item>
            <el-menu-item
              index="4"
              route="/setting/reward"
            >
              <i class="el-icon-setting"></i>
              <span slot="title">赞赏设置</span>
            </el-menu-item>
            <el-menu-item
              index="5"
              route="/setting/misc"
            >
              <i class="el-icon-setting"></i>
              <span slot="title">账号管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 右边子路由 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {
      active: "1",
    };
  },
  mounted() {
    switch (this.$route.path) {
      case "/setting/basic":
        this.active = "1";
        break;
      case "/setting/profile":
        this.active = "2";
        break;
      case "/setting/blacklist":
        this.active = "3";
        break;
      case "/setting/reward":
        this.active = "4";
        break;
      case "/setting/misc":
        this.active = "5";
        break;

      default:
        break;
    }
  },
};
</script>

<style scoped>
.setting {
  width: 66%;
  margin: 0 auto;
  margin-top: 100px;
}
.left_setting {
  height: 100vh;
}
</style>